<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Dynamic Sky Gradient</title>
  <style>
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      background: #00000c;
      overflow: hidden;
    }
    .sky-gradient {
      width: 100%;
      height: 100%;
      transition: background 5s ease-out;
      animation: fadeIn 5s ease-out;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .sky-gradient-00, .sky-gradient-24 { background: #00000c; }
    .sky-gradient-01 { background: linear-gradient(to bottom, #020111 85%, #191621 100%); }
    .sky-gradient-02 { background: linear-gradient(to bottom, #020111 60%, #20202c 100%); }
    .sky-gradient-03 { background: linear-gradient(to bottom, #020111 10%, #3a3a52 100%); }
    .sky-gradient-04 { background: linear-gradient(to bottom, #20202c 0%, #515175 100%); }
    .sky-gradient-05 { background: linear-gradient(to bottom, #40405c 0%, #6f71aa 80%, #8a76ab 100%); }
    .sky-gradient-06 { background: linear-gradient(to bottom, #4a4969 0%, #7072ab 50%, #cd82a0 100%); }
    .sky-gradient-07 { background: linear-gradient(to bottom, #757abf 0%, #8583be 60%, #eab0d1 100%); }
    .sky-gradient-08 { background: linear-gradient(to bottom, #82addb 0%, #ebb2b1 100%); }
    .sky-gradient-09 { background: linear-gradient(to bottom, #94c5f8 1%, #a6e6ff 70%, #b1b5ea 100%); }
    .sky-gradient-10 { background: linear-gradient(to bottom, #b7eaff 0%, #94dfff 100%); }
    .sky-gradient-11 { background: linear-gradient(to bottom, #9be2fe 0%, #67d1fb 100%); }
    .sky-gradient-12 { background: linear-gradient(to bottom, #90dffe 0%, #38a3d1 100%); }
    .sky-gradient-13 { background: linear-gradient(to bottom, #57c1eb 0%, #246fa8 100%); }
    .sky-gradient-14 { background: linear-gradient(to bottom, #2d91c2 0%, #1e528e 100%); }
    .sky-gradient-15 { background: linear-gradient(to bottom, #2473ab 0%, #1e528e 70%, #5b7983 100%); }
    .sky-gradient-16 { background: linear-gradient(to bottom, #1e528e 0%, #265889 50%, #9da671 100%); }
    .sky-gradient-17 { background: linear-gradient(to bottom, #1e528e 0%, #728a7c 50%, #e9ce5d 100%); }
    .sky-gradient-18 { background: linear-gradient(to bottom, #154277 0%, #576e71 30%, #e1c45e 70%, #b26339 100%); }
    .sky-gradient-19 { background: linear-gradient(to bottom, #163C52 0%, #4F4F47 30%, #C5752D 60%, #B7490F 80%, #2F1107 100%); }
    .sky-gradient-20 { background: linear-gradient(to bottom, #071B26 0%, #071B26 30%, #8A3B12 80%, #240E03 100%); }
    .sky-gradient-21 { background: linear-gradient(to bottom, #010A10 30%, #59230B 80%, #2F1107 100%); }
    .sky-gradient-22 { background: linear-gradient(to bottom, #090401 50%, #4B1D06 100%); }
    .sky-gradient-23 { background: linear-gradient(to bottom, #00000c 80%, #150800 100%); }
  </style>
</head>
<body>
<div id="sky" class="sky-gradient"></div>
<script>
  function updateSkyGradient() {
    const now = new Date();
    const currentHour = now.getHours();
    const skyDiv = document.getElementById('sky');
    // Remove all existing classes
    skyDiv.className = 'sky-gradient';
    // Add the appropriate class based on the current hour
    skyDiv.classList.add(`sky-gradient-${String(currentHour).padStart(2, '0')}`);
    // Update the text content (optional)
    skyDiv.textContent = String(currentHour).padStart(2, '0');
  }
  // Update immediately on page load
  updateSkyGradient();
  // Update every minute
  setInterval(updateSkyGradient, 60000);
</script>
</body>
</html>